@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-promoTag';

$appearances: 'primary', 'red', 'orange', 'yellow', 'green', 'blue', 'violet', 'pink';

.promoTag {
  @include composite-var($promo-tag-container);

  display: inline-flex;
  align-items: center;
  white-space: nowrap;

  @each $appearance in $appearances {
    &[data-appearance=#{$appearance}] {
      color: simple-var($theme-variables, 'sys', $appearance, 'on-accent');
      background-color: simple-var($theme-variables, 'sys', $appearance, 'accent-default');
    }
  }
}
